/**
 *
 * @description: Promise
 * @author: junyong.hong
 * @createTime: 2018/3/29
 * @version: 1.0.0.0
 * @history:
 *    1、
 *    2、
 *
 */
{
    // es5回调解决异步操作
    let ajax = function (callback) {
        console.log('执行');
        setTimeout(function () {
            // 判断回调是不是存在，如果存在，执行下一步
            callback && callback.call()
        },1000)
    };
    ajax(function () {
        console.log('timeout1');
    });
}

{
    // es6
    let ajax = function () {
        console.log('执行2');
        // 返回一个Promise实例（执行下一步功能）
        // resolve执行下一步操作
        // reject中断下一步操作
        return new Promise(function (resolve,reject) {
            setTimeout(function () {
                resolve();
            },1000);
        })
    };

    ajax().then(function () {
        console.log('promise','timeout2');
    })
}

{
    // A执行完再执行B,B执行完了执行C ...
    let ajax = function () {
        console.log('执行3');
        // 返回一个Promise实例（执行下一步功能）
        // resolve执行下一步操作
        // reject中断下一步操作
        return new Promise(function (resolve,reject) {
            setTimeout(function () {
                resolve();
            },1000);
        })
    };

    ajax().then(function () {
        return new Promise(function (resolve,reject) {
            // 又可以下一步
            resolve();
        },2000)
    }).then(function () {
        console.log('timeout3');
    })
}

{
    // catch捕获错误
    let ajax = function (num) {
        console.log('执行4');
        return new Promise(function (resolve,reject) {
            // 如果大于5，执行下一步
            if(num > 5){
                resolve();
            }else{
                // 抛出错误
                throw new Error('出错了');
            }
        })
    };

    ajax(6).then(function () {
        console.log('log',6);
    }).catch(function (err) {
        console.log('catch',err);
    });

    ajax(3).then(function () {
        console.log('log',3);
    }).catch(function (err) {
        console.log('catch',err);
    })
}

{
    // 所有图片加载完再添加到页面
    function loadImg(src) {
        return new Promise((resolve,reject) => {
            let img = document.createElement('img');
            img.src = src;
            // 图片加载完
            img.onload=function () {
                resolve(img);
            };
            // 图片加载失败
            img.onerror = function (err) {
                reject(err);
            };
        })
    }

    function showImgs(imgs) {
        imgs.forEach(function (img) {
            document.body.appendChild(img);
        })
    }

    // all：把多个Promise实例当成一个Promise实例
    Promise.all([
        // 三张图片都加载完，才会触发all，才执行then
        loadImg('http://myoli.xin/public/images/banner.jpg'),
        loadImg('http://myoli.xin/public/images/banner.jpg'),
        loadImg('http://myoli.xin/public/images/banner.jpg')
    ]).then(showImgs)
}

{
    // 有一个图片加载完成添加到页面
    function loadImg(src) {
        return new Promise((resolve,reject) => {
            let img = document.createElement('img');
            img.src = src;
            // 图片加载完
            img.onload=function () {
                resolve(img);
            };
            // 图片加载失败
            img.onerror = function (err) {
                reject(err);
            };
        })
    }

    function showImgs(img) {
        let p = document.createElement('p');
        p.appendChild(img);
        document.body.appendChild(p)
    }

    // 三张图片，只要有一个图片加载出来，那个就先显示在页面上
    Promise.race([
        loadImg('http://myoli.xin/public/images/banner.jpg'),
        loadImg('http://myoli.xin/public/images/banner.jpg'),
        loadImg('http://myoli.xin/public/images/banner.jpg')
    ]).then(showImgs)
}
